<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合练习1</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <!-- 1.进行页面布局，放置一个复选框，一个下拉列表框，两个文本框和一个展示结果的div -->
        <!-- 2.把每一个表单元素的数据进行展示（最后成功完成后要删除） -->
        <!-- 3.把下拉列表框和数据展示的div进行隐藏和显示的操作 -->
        <!-- 4.获取文本框的数据，结合是否会员和会员等级来决定折扣，进行计算（提示：使用计算属性） -->
        <input type="checkbox" v-model="toggleValue">是否会员{{toggleValue}}
        <br>
        <select v-model="singleSelect" v-show="toggleValue">
                <option value="黄金">黄金会员</option>
                <option value="钻石">钻石会员</option>
                <option value="白金">白金会员</option>
        </select>{{singleSelect}}
        <br>
        数量：<input type="text" v-model="singleText1">{{singleText1}}<br>
        单价：<input type="text" v-model="singleText2" @keydown.enter = 'visible=true'>{{singleText2}}
        <div v-show="visible">
            尊敬的{{singleSelect}}会员，你购买的数量是{{singleText1}}，单价是{{singleText2}}，折扣是{{discount}}，总价是{{singleText1*singleText2*discount}}
        </div>
    </div>
</body>
</html>

<script>
    const appConn = Vue.createApp({
        data() {
            return {
                toggleValue:'',
                singleSelect:'顾客',
                visible:false,
                singleText1:'',
                singleText2:''
            }
        },
        computed:{
            discount(){
                if(this.singleSelect=="顾客")
                    return 1;
                else if(this.singleSelect=="黄金")
                    return 0.8;
                else if(this.singleSelect=="钻石")
                    return 0.6;
                else(this.singleSelect=="白金")
                    return 0.4;
            }
        }
    }).mount("#app")
</script>






fullClick(){
    if(this.all){
        this.books.map(vv=>{
            vv.check=true
        })
    }
    else{
        this.books.map(vv=>{
            vv.check=false
        })
    }
    }
}